<template>
  <div class="user-level-table">
    <a-table :bordered="true" :pagination="false" rowKey="referrerLevel" :columns="userColumns" :data-source="userData">
      <template slot="customOneLevel">
        <span>阶梯一达成人数/达成率</span>
        <a-tooltip placement="top">
          <template slot="title">
            <span>阶梯一达成率 = 阶梯一达成用户 / 阶梯一总参与用户</span>
          </template>
          <a-icon style="margin-left: 10px" type="exclamation-circle"/>
        </a-tooltip>
      </template>
      <template slot="customTwoLevel">
        <span>阶梯二达成人数/达成率</span>
        <a-tooltip placement="top">
          <template slot="title">
            <span>阶梯二达成率 = 阶梯二达成用户 / 阶梯二总参与用户</span>
          </template>
          <a-icon style="margin-left: 10px" type="exclamation-circle"/>
        </a-tooltip>
      </template>
      <template slot="customThreeLevel">
        <span>阶梯三达成人数/达成率</span>
        <a-tooltip placement="top">
          <template slot="title">
            <span>阶梯三达成率 = 阶梯三达成用户 / 阶梯三总参与用户</span>
          </template>
          <a-icon style="margin-left: 10px" type="exclamation-circle"/>
        </a-tooltip>
      </template>
      <span slot="referrerLevel" slot-scope="text, record">
        {{ record.referrerLevel + 1 }}
      </span>
      <span slot="finish1" slot-scope="text, record">
        {{ record.finish1 }}/ {{ record.finishRate1 }}%
      </span>
      <span slot="finish2" slot-scope="text, record">
        {{ record.finish2 }}/ {{ record.finishRate2 }}%
      </span>
      <span slot="finish3" slot-scope="text, record">
        {{ record.finish3 }}/ {{ record.finishRate3 }}%
      </span>
    </a-table>
  </div>
</template>

<script>

  export default {
    name: 'UserLevelTable',
    data () {
      return {
        userColumns: [
          {
            title: '用户等级',
            dataIndex: 'referrerLevel',
            scopedSlots: { customRender: 'referrerLevel' },
            align: 'center'
          },
          {
            title: '总人数',
            dataIndex: 'joinCount',
            align: 'center'
          },
          {
            scopedSlots: { customRender: 'finish1' },
            slots: { title: 'customOneLevel' },
            align: 'center'
          }, {
            scopedSlots: { customRender: 'finish2' },
            slots: { title: 'customTwoLevel' },
            align: 'center'
          }, {
            scopedSlots: { customRender: 'finish3' },
            slots: { title: 'customThreeLevel' },
            align: 'center'
          }, {
            title: '助力人数>1',
            dataIndex: 'helpCount',
            align: 'center'
          }],
        userData: []
      }
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      },
      gameTaskId () {
        return this.$route.query.gameTaskId
      }
    },
    methods: {
      init (list) {
        this.userData = list
      }
    }
  }
</script>

<style scoped>

</style>
